﻿/*
 Plugin for smalljs toolkit
 Copyright (c) 2013 Walter M. Soto Reyes
 http://www.smalljs.com or https://smalljs.codeplex.com
 License: https://smalljs.codeplex.com/license
*/
(function ($) {
    var toggle = function (parameters) { 
        ///	<summary>
        ///  Enable div as toggle control
        ///	</summary>
        ///<param name="parameters" type="json">
        /// { 
        ///   labels:{
        ///      ON:'YES',OFF:'NO'
        ///   },
        ///   showLabels:true
        /// }
        ///</param>
        smalljs.plugin({
            toggleIsOn: function () {
                ///	<summary>
                /// Is toggleSwitch in the "on" position?
                ///	</summary> 
                ///	<returns type="boolean" />
                if (this.me.length > 0) {
                    return ($(this.me[0]).att('toggle') == 'on');
                }
                return false;
            },
            onToggle: function (fn) {
                ///	<summary>
                /// Toggle event for the toggleSwitch plugin
                ///	</summary> 
                ///	<param name="fn" type="function">
                /// Function to execute
                ///	</param>
                ///	<returns type="this" />
                this.forEach(function() {
                    this.onToggle(fn);
                });

                return this;
            }
        });
 

        var labels = { ON: 'ON', OFF: 'OFF' };
      
        var hideLabels = true;
       
        var _indicatorW = 39;
        var _width = '50px';
        if (typeof (parameters) !== 'undefined') {
            if (typeof (parameters.labels) !== 'undefined') {
                labels = parameters.labels;
            }
            if (typeof (parameters.showLabels) !== 'undefined') {
                hideLabels = !parameters.showLabels;
                if (!hideLabels) {
                    _width = '80px';
                    _indicatorW = 69;
                }
            }
        }
        
       

        $('[toggle]').forEach(function () {
            (function (c) {
                var toggleEvent = null;
                var nolabels = hideLabels;
                var width = _width;
                var parentW = '85px';
                var indicatorW = _indicatorW;
                var bgColor = '#dddddd';
                var bgColorOn = '#008287';
                var disabled = ($(c).att('disabled') === 'true');
                if ($(c).att('labels') == 'true') {
                    if (hideLabels) { 
                        nolabels = false;
                        width = '80px';
                        parentW = '85px';
                        indicatorW = 69;
                    }  
                }
              


                if ($(c).att('bgcolor').length > 0) {
                    bgColorOn = $(c).att('bgcolor');
                }
                
                if (!nolabels) { bgColor = '#ffffff'; }

                $(c).style('width:' + parentW,
                    'height:25px', 'cursor:pointer',
                    'overflow:hidden','position:relative',
                    'display:block');

                var track = document.createElement('div');
                $(track).style('border:2px solid ' + (disabled ? '#dddddd' : '#B2B2B2'), 'width:' + width,
                    'height:20px', 'cursor:pointer',
                    'overflow:hidden', 'position:absolute',
                    'background-color:#ffffff',
                    'display:block', 'color:#dddddd');

                var insideTrack = document.createElement('div');

                $(insideTrack).style('width:46px','margin:2px',
                    'height:16px','position:absolute',
                    'background-color:' + bgColor,
                    'display:block');

                $(track).get[0].appendChild(insideTrack);

                $(c).get[0].appendChild(track);

                var indicator = document.createElement('div');

                $(indicator).style('height:24px', 'width:15px', 'background-color:' + (disabled ? '#BEBEBE' : '#666666'), 'margin-left:0px', 'position:absolute');

                if (!nolabels) {
                    var label = document.createElement('div');
                    $(label).style('width:65px', 'height:16px',
                        'background-color:#ffffff', 
                        'margin-left:15px',
                        'font-size:95%', 
                        'text-align:center', 'position:absolute').text(labels.OFF);
                    $(track).get[0].appendChild(label);
                }

                $(c).get[0].appendChild(indicator);


                if ($(c).att('toggle') == 'on') {
                    if (!nolabels) {
                        $(label).text(labels.ON).get[0].style.marginLeft = '0px';
                    }
                    $(indicator).get[0].style.marginLeft = indicatorW+'px';
                }  

                var _enable = function () {
                    disabled = false;
                    $(indicator).get[0].style.backgroundColor = '#666666';
                    $(track).get[0].style.borderColor = '#B2B2B2';
                };
           

                var _off = function () {
                    if (!nolabels) {
                        $(label).get[0].style.marginLeft = '15px';
                        $(label).text(labels.OFF);
                    }
                    $(indicator).get[0].style.marginLeft = '0px';
                    if (nolabels) {
                        $(insideTrack).get[0].style.backgroundColor = bgColor;
                    }
                    $(c).att('toggle', 'off');
                    if (typeof (toggleEvent) === 'function') { toggleEvent('off'); }
                };
                var _on = function () {
                    if (!nolabels) {
                        $(label).get[0].style.marginLeft = '0px';
                        $(label).text(labels.ON);
                    }
                    
                    $(indicator).get[0].style.marginLeft = indicatorW + 'px';
                    if (nolabels) {
                        $(insideTrack).get[0].style.backgroundColor = bgColorOn;
                    }

                    $(c).att('toggle', 'on');
                    if (typeof (toggleEvent) === 'function') { toggleEvent('on'); }
                };

                var _disable = function () {
                    _off();
                    disabled = true;
                    $(indicator).get[0].style.backgroundColor = '#BEBEBE';
                    $(track).get[0].style.borderColor = '#dddddd';
                };

                var _toggle = function () {
                    if (!disabled) {
                        if ($(c).att('toggle') == 'on') {
                            _off();
                        } else {
                            _on();
                        }
                    }
                };
                  
                c.enable = _enable;
                c.disable = _disable;
                c.toggle = _toggle;
                c.toggleOn = _on;
                c.toggleOff = _off;
                c.isToggleOn = function () { return $(c).att('toggle') == 'on'; };
                c.onToggle = function (fn) {
                    toggleEvent = fn;
                    
                };
                $(c).onClick(_toggle);
               
            })(this);
        });

    };

    smalljs.extend({ 
        toggleSwitch:{
            enable:toggle
        }
    });

  


})(sj);